<template>
    <div class="form-solution-tree-container">
        <div class="form-solution-tree-left-container">
            <div class="form-solution-tree-nav">{{i18n('list.navigationTree','导航树')}}</div>
            <div class="form-solution-tree-box">
                <div class="rx-roll">
                    <rx-vue-tree
                        v-model="checked"
                        :treeData="treeData"
                        @rowClick="rowClick"
                        v-model:expandedKeys="expandedKeys"
                        :checkStrictly="true"
                        label="title"
                        field="value"
                        :fold-peer-node="false"
                        :async-tree="true"
                        :show-icon="true"
                        :show-drag="false"
                        :show-checkbox="false"
                        :show-edit="true"
                        @expandClick="expandClick"
                        :multiple="false"
                        :iconStyle="{fontSize:'11px'}"
                        :parentField="parentField"
                    >
                        <template #edit="{tree,data}">
                            <div class="btn" @click="addData(tree)">
                                <rx-icon-show class="rx-tree-icon" icon="icon-lineVue3_add"/>{{$ti18('rxList.add', '新增')}}
                            </div>
                            <div class="btn" v-if="tree.key!='0'" @click="editData(tree)">
                                <rx-icon-show class="rx-tree-icon" icon="icon-linebianji"/>{{$ti18('rxList.editBtn','编辑')}}
                            </div>
                            <div class="btn del" v-if="tree.key!='0'" @click="delData(tree,data)">
                                <rx-icon-show class="rx-tree-icon" icon="icon-lineVue3_delete"/>{{$ti18('rxList.delBtn','删除')}}
                            </div>
                        </template>
                    </rx-vue-tree>
                </div>
            </div>
        </div>
        <div class="form-solution-tree-right-container">
            <div class="form-solution-tree-toolbar" v-show="buttons.length > 0">
                <a-form class="buttongmodle">
                    <a-button-group>
                        <a-button
                            :type="btn.style"
                            :ref="btn.method"
                            v-for="btn in buttons"
                            @click="handMethod(btn)"
                            :loading="btn.loading"
                            :key="btn.name"
                            size="small"
                        >{{ getI18Name(btn) }}</a-button>
                    </a-button-group>
                </a-form>
            </div>
            <div style="padding: 10px;height: 100%;position: relative">
                <div class="previewBox">
                    <x-form-build
                        v-if="formConfig"
                        ref="formBuild"
                        :form-data="formData"
                        :form-config="formConfig"
                        :global-config="globalConfig"
                        :contextData="contextData"
                        :permission="permission"
                        :form-js="formJs"
                        :readOnly="readonly"
                        :alias="formAlias"
                        :name="formSolution.name"
                        :id-field="idField"
                        :dialogBox="dialogBox"
                    ></x-form-build>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import FormSolutionFunc from "./FormSolutionFunc";
import ButtonFunc from "./ButtonFunc";
import FlowUtil from "@/views/modules/bpm/js/FlowUtil.js";
import FormSolutionApi from "@/common/api/form/formSolution.js";
import {Util,RxVueTree,RxIconShow} from "@lowcode/jpaas-base-lib";
import DialogBox from "@/assets/js/dialogBox";
/**
 * 表单方案(树形)渲染页面
 */
export default {
    name: "FormSolutionTreeShow",
    mixins: [FormSolutionFunc, ButtonFunc, FlowUtil],
    components:{RxVueTree,RxIconShow},
    props: {
        alias: {
            type: String,
            default: ""
        },
        readOnly: {
            default: false
        },
        //这个是从DialogView打开时需要用到的。
        menuParams: {
            type: String
        },
    },
    data() {
        return {
            dialogBox: DialogBox,
            //懒加载
            lazyLoading:false,
            //父字段
            parentField: 'PARENT_ID_',
            //左树
            treeData:[],
            checked:[],
            expandedKeys:[],
            //当前选中行
            curRow:"",
            //是否为树型表单
            isTreeForm:true,
        }
    },
    created() {
        this.initParams();
        this.initTree(true);
    },
    methods: {
        /**
         * 初始化
         * @param isLoad
         */
        initTree(isLoad) {
            FormSolutionApi.getTreeByAlias(this.formSolutionAlias).then(res => {
                let data = res.data;
                if(res.lazyLoading){
                    this.lazyLoading=true;
                }
                this.idField = res.pkField;
                this.parentField = res.parentField;
                let ary = Util.listToTree(data, this.idField, this.parentField);
                Util.genTreeData(ary, "text", this.idField, this.idField);
                this.treeData = ary;
                if(isLoad){
                    this.expandedKeys.push(ary[0].value)
                }
            })
        },
        rowClick(row){
            this.curRow = row;
            this.readonly = true;
            this.formPkId = this.curRow[this.idField];
            this.init();
        },
        /**
         * 展开 判断是否异步
         * @param trigger
         * @param tree
         * @param parenData
         * @returns {Promise<void>}
         */
        async expandClick(trigger,tree,parenData){
            let self = this ;
            if(!this.lazyLoading || !trigger){
                return
            }
            if(tree.children && tree.children.length > 0){
                return ;
            }else {
                let res =await FormSolutionApi.getTreeByAlias(this.formSolutionAlias,tree[self.idField]);
                let data = res.data;
                let ary = Util.listToTree(data, self.idField, self.parentField);
                Util.genTreeData(ary, "text", self.idField, self.idField);
                tree['children'] = ary ;
                tree.loading=false;
                self.treeData = [...self.treeData];
            }
        },
        addData(row){
            this.parent = {field: this.parentField, value: row[this.idField]};
            this.curRow = {};
            this.readonly = false;
            this.formPkId = "";
            this.init();
        },
        editData(row){
            this.parent = {};
            this.curRow = row;
            this.readonly = false;
            this.formPkId = this.curRow[this.idField];
            this.init();
        },
        delData(row){
            let self_ = this;
            this.$confirm({
                title: self_.$ti18('rxMsa.actionTips','操作提示'),
                content: self_.$ti18('rxMsa.delInfo','您确定需要删除选中的记录吗？'),
                okText: self_.$ti18('rxForm.ackBtn','确认'),
                cancelText: self_.$ti18('rxForm.cancelBtn','取消'),
                zIndex: 20000,
                onOk() {
                    FormSolutionApi.removeById({
                        alias: self_.formSolutionAlias,
                        id: row[self_.idField]
                    }).then(res => {
                        self_.curRow={};
                        self_.initTree();
                    });
                },
                onCancel() {
                }
            })
        },
    },
    watch: {},
}
</script>

<style scoped>
.form-solution-tree-right-container{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.previewBox{
    position: absolute;
    inset: 0;
    height: 100%;
}
.form-solution-tree-right-container ::v-deep(.x-form-build-box){
    height: 100%;
    margin: 0;
    background-color: transparent;
    overflow: auto;
}
.rx-tree-icon{
    margin-right: 6px;
}

.form-solution-tree-toolbar{
    border-bottom: 1px solid #ddd;
    align-items: center;
    display: flex;
    justify-content: flex-end;
    height: 40px;
    box-sizing: border-box;
}
.form-solution-tree-container{
    display: flex;
    width: 100%;
    height: 100%;
}
.form-solution-tree-left-container{
    width: 240px;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
}
.form-solution-tree-nav{
    padding: 0 14px;
    height: 38px;
    line-height: 38px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;

}
.form-solution-tree-box{
    padding: 0 10px;
    flex: 1;
    position: relative;
}
.rx-roll{
    position: absolute;
    overflow: auto;
    top: 0;
    left: 10px;
    right: 0;
    bottom: 0;
}
</style>
